<template>
    <div class="product-list">
        <el-form ref="searchForm" :model="searchParams"  label-width="80px" inline size="small">
            <el-form-item label="搜索" prop="search">
                <el-input v-model="searchParams.search"></el-input>
            </el-form-item>
            <el-form-item label="分类" prop="category">
                <el-select v-model="searchParams.category" placeholder="分类">
                    <el-option label="全部" value="">
                    </el-option>
                    <el-option v-for="(item, index) in categoryList" :key="index" :label="item.trim()" :value="item.trim()">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchHandler">搜索</el-button>
                <el-button type="primary" @click="resetHandler">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- v-if="list.length>0"   有商品就渲染,没有商品就不渲染 -->
        <!-- v-loading="list.length<0"   没有商品就正在加载,有商品就不渲染 -->
        <el-table :data="list" v-loading="loading" border height="520px">
            <el-table-column label="编号" prop="proid" width="180" align="center"></el-table-column>
            <el-table-column label="商品名称" prop="proname" width="180" align="center"></el-table-column>
            <el-table-column label="商品图片" prop="img1" width="180" align="center">
                <template v-slot="{ row }">
                    <!-- <img  width="100" height="100" :src="row.img1"  alt=""> -->
                    <el-image class="showImg" :src="row.img1" :preview-src-list="[row.img1, row.img2, row.img3, row.img4]"
                        alt=""></el-image>
                </template>
            </el-table-column>
            <el-table-column label="商品原价" prop="originprice" width="180" align="center"></el-table-column>
            <el-table-column label="商品现价" prop="currentprice" width="180" align="center">
                <template v-slot="{ row }">
                    <span v-if="row.discount < 10">{{ ((row.originprice * row.discount) / 10).toFixed(2) }}</span>
                    <span v-else>暂无折扣</span>
                </template>
            </el-table-column>
            <el-table-column label="商品库存" prop="stock" width="180" align="center"></el-table-column>
            <el-table-column label="商品销量" prop="sales" width="180" align="center"></el-table-column>
            <el-table-column fixed="right" label="开启推荐" prop="isrecommend" width="100" align="center">
                <template v-slot="{ row }">
                    <el-switch v-model="row.isrecommend" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="0" @change="($event) => { updateRecommendHandler($event, row.proid) }"></el-switch>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="开启秒杀" prop="isseckill" width="100" align="center">
                <template v-slot="{ row }">
                    <el-switch v-model="row.isseckill" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="0" @change="updateSeckillHandler($event, row.proid)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="查看详情" width="100" align="center">
                <template v-slot="{ row }">
                    <el-button type="primary" size="small" @click="detailHandler(row.proid)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--抽屉效果 -->
        <el-drawer title="商品详情" :visible.sync="drawer" direction="rtl" size="40%" >
            <!-- 插槽内容 => 抽屉中的内容 -->
            <!-- hello world -->
            <el-main v-if="info">
                <el-descriptions title="商品详情" direction="vertical" :column="1" border>
                    <el-descriptions-item label="商品名称">{{ info.proname }}</el-descriptions-item>
                    <el-descriptions-item label="品牌">{{ info.brand }}</el-descriptions-item>
                    <el-descriptions-item label="分类">{{ info.category }}</el-descriptions-item>
                    <el-descriptions-item label="商品图片">
                        <el-image :src="info.img1" :preview-src-list="info.banners"></el-image>
                    </el-descriptions-item>
                    <el-descriptions-item label="详情">
                        {{ info.desc }}
                    </el-descriptions-item>
                    <el-descriptions-item label="商品价格">
                        {{ (info.originprice*info.discount/10).toFixed(2) }}
                    </el-descriptions-item>
                    <el-descriptions-item label="是否在售">
                        {{ info.issale ? "在售": "已下架" }}
                    </el-descriptions-item>
                    <el-descriptions-item label="库存">
                        {{ info.issale ?  info.stock: 0}}
                    </el-descriptions-item>
                    <el-descriptions-item label="销量">
                        {{ info.sales}}
                    </el-descriptions-item>
                </el-descriptions>
            </el-main>
        </el-drawer>
    </div>
</template>

<script>
import { getCategoryListAPI, getProSearchListAPI,getProDetailAPI } from "@/api/pro"
import { updateIsSecondkillAPI, updateIsrecommendkillAPI } from "@/api/pro";
export default {
    name: "ProduceSearchView",
    data() {
        return {
            searchParams: {
                search: "",
                category: "",
            },
            categoryList: [],
            list: [],
            loading: false,
            drawer: false,
            info:null,
        }
    },
    methods: {
        getCategoryList() {
            getCategoryListAPI().then(res => {
                console.log("分类获取成功", res);
                this.categoryList = res.data;
            }).catch(err => {
                this.$message.error(err.message);
            })
        },
        getProSearchListAPI() {
            if (this.loading) return false;
            this.loading = true;
            getProSearchListAPI(this.searchParams).then(res => {
                console.log("商品获取成功", res);
                this.list = res.data;
                setTimeout(() => {
                    this.loading = false;
                }, 500)
            }).catch(err => {
                this.$message.error(err.message);
            })
        },
        updateRecommendHandler(flag, proid) {
            console.log("updateRecommendHandler", flag, proid);
            updateIsrecommendkillAPI({
                proid,
                flag: !!flag,
            }).then((res) => {
                console.log("更新秒杀", res);
            }).catch(err => {
                this.$message.error(err.message);
            })
        },
        updateSeckillHandler(flag, proid) {
            console.log("updateSeckillHandler", {
                proid,
                flag: !!flag,
            });
            updateIsSecondkillAPI({
                proid,
                flag: !!flag,
            }).then((res) => {
                console.log("更新秒杀", res);
            }).catch(err => {
                this.$message.error(err.message);
            })
        },
        searchHandler() {
            this.getProSearchListAPI();
        },
        async detailHandler(proid) {
            console.log("点击查看详情", proid);
            this.drawer = true;

            try{
                var res = await getProDetailAPI({proid})
                console.log("获取商品详情",res);
                this.info = res.data[0];
            }catch(err){
                this.$message.error(err.message);
            }
        },
        resetHandler(){
            console.log(this.$refs.searchForm);
            this.$refs.searchForm.resetFields()
        }
    },
    mounted() {
        this.getCategoryList();
        this.getProSearchListAPI();
    },
}
</script>

<style  scoped>
.showImg {
    width: 50px;
    height: 50px;
}
</style>